<template>
	<view>
		<view class="statbar"></view>
		<u-toast ref="uToast"></u-toast>

		<u-navbar title="意见反馈" :autoBack="true"></u-navbar>
	
		<view style="margin: 70px 20px 20px 20px;text-align: center;width: 100%;">
			
			<view style="margin: 5px;">
				<u--text text="问题类型" :bold="true"></u--text>

			</view>
			<view v-for="(item, index) in feedBackTypeList" :key="index" style="margin: 10px 5px 10px 5px;float: left;">
				<u-button type="primary" style="width: 100px;" :plain="activeIndex != index" :text="item.name"
					@click="select(index)">
				</u-button>
			</view>

		</view>
		<view style="clear: both;margin: 25px;">
			<u--textarea v-model="content" placeholder="请输入反馈内容" height="120" count>
			</u--textarea>
			<u-upload style="margin-top: 10px;" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic"
				name="1" multiple :maxCount="5">
			</u-upload>

		</view>
		<u-button type="primary" style="width: 100px;" text="提交" @click="submit">
		</u-button>
	</view>
</template>

<script>
	import {
		submitFeedBack,uploadImages
	} from '../../config/api.js';
	import {
		initFeedBackType
	} from '../../config/util.js';
	import {
		BASE_URL
	} from '@/config/config.js';
	export default {
		data() {
			return {
				activeIndex: 0,
				feedBackTypeList: [],
				content: '',
				imagesUrl: '',
				imgList:[],
				fileList1: [],
				uploadStatus: false

			}
		},
		mounted() {
			this.findFeedBackType();
		},
		methods: {
			findFeedBackType() {
				this.feedBackTypeList = initFeedBackType();
			},
			select(index) {
				this.activeIndex = index;
			},
			submit() {
				let typeId = this.feedBackTypeList[this.activeIndex].id;
				if (!this.content|| ''== this.content){
					this.$refs.uToast.show({
						type: 'error',
						message: "反馈内容不能为空"
					})
					return;
				}

				if (this.uploadStatus){
					this.$refs.uToast.show({
						type: 'error',
						message: "图片正在上传中,请稍后提交"
					})
					return;
				}
				this.fileList1.forEach((item)=>{
					this.imgList.push(item.url)
				})
				let data = {
					typeId: typeId,
					content: this.content,
					imagesUrl: this.imgList.join(",")
				}
				var that = this
				// get请求
				submitFeedBack(data).then((res) => {
					this.$refs.uToast.show({
						type: 'success',
						message: "提交反馈成功",
						complete() {
							uni.navigateTo({
								url: '/page/my/my'
							})
						}
					})
				}).catch(() => {
					this.$refs.uToast.show({
						type: 'error',
						message: "提交失败"
					})
				})

			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
					this.uploadStatus = true;
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					this.uploadStatus = false;
					fileListLen++
				}
			},
			async uploadFilePromise(url) {
				console.log(url)
				return new Promise((resolve, reject) => {	
					let a = uni.uploadFile({
						url: BASE_URL+'/file/uploadAdvise', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							'Authorization': this.$store.state.token
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
								console.log(res)
							}, 100)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #e7e7e7,
	}
	.statbar {
		height: var(--status-bar-height);
		background: #F8F8F8;
	}
</style>
